<template>
   
<div>
   <el-form ref="form"  label-width="200px">
      <el-form-item label="Component Name"  :required="true">
         <el-input v-model="component.Name" ></el-input>
	  </el-form-item>
      <el-form-item label="Component Type"  >
         <el-input v-model="component.Type" :readonly="true"></el-input>
	  </el-form-item>
	
	  <template   v-for="(item, index) in componentDefinition">
	      <el-form-item :label="item.name"  :required="item.required=='true'">
             <template v-if="  item.type=='text'   ">
               <el-input  v-model="componentSettings[index]" ></el-input>
	         </template>
	         <template v-if="  item.type=='multiline_text'   ">
               <el-input  type="textarea" :rows="2"  v-model="componentSettings[index]" ></el-input>
	         </template>
	         <template v-if="  item.type=='password'   ">
               <el-input type="password"  v-model="componentSettings[index]" ></el-input>
	         </template>
	         <template v-if="  item.type=='integer'  || item.type=='long'   ">
               <el-input-number  v-model="componentSettings[index]" ></el-input-number>
	         </template>
	         <template v-if="  item.type=='boolean'   ">
               <el-checkbox   v-model="componentSettings[index]"   ></el-checkbox>
	         </template>
	         <template v-if="  item.type=='choice'   ">
               <el-select  placeholder="请选择"  v-model="componentSettings[index]" >
                 <el-option
                    v-for="choice in item.choices"
                    :label="choice"
                    :value="choice">
                 </el-option>
               </el-select>
	        </template>
			 <template v-if="  item.type=='flow'   ">
               <el-select  placeholder="请选择"  v-model="componentSettings[index]" >
                 <el-option
                    v-for="f in flows"
                    :label="f.Name"
                    :value="f.Id">
                 </el-option>
               </el-select>
	        </template>
	
          </el-form-item>
	  </template>
	
	   <template v-if="  component.ComponentDefinition.inputMessageType=='entity' ||  (component.ComponentDefinition.inputMessageType=='any' && component.ComponentDefinition.showInputModel=='true')  ">
	      <el-form-item label="Input Model"  >
		
                <el-select  placeholder="请选择"  v-model="componentOtherSettings.inputModelId" >
                 <el-option
                    v-for="f in dropDownModels"
                    :label="f.Name"
                    :value="f.Id">
                 </el-option>
               </el-select>
	      </el-form-item>
	   </template>
	   <template v-if=" ( component.ComponentDefinition.outputMessageType=='entity' ||  (component.ComponentDefinition.outputMessageType=='any' && component.ComponentDefinition.showOutputModel=='true') )&& component.ComponentDefinition.inputOutputModelsMatch!='true'  ">
	      <el-form-item label="Output Model"  >
		
                <el-select  placeholder="请选择"  v-model="componentOtherSettings.outputModelId" >
                 <el-option
                    v-for="f in dropDownModels"
                    :label="f.Name"
                    :value="f.Id">
                 </el-option>
               </el-select>
	      </el-form-item>
	   </template>
	
	
	  <el-form-item label="Enabled"  >
         <el-checkbox v-model="componentOtherSettings.enabled" ></el-checkbox>
	  </el-form-item>
	  <el-form-item label="Log Input"  >
         <el-checkbox v-model="componentOtherSettings.logInput" ></el-checkbox>
	  </el-form-item>
	  <el-form-item label="Log Output"  >
         <el-checkbox v-model="componentOtherSettings.logOutput" ></el-checkbox>
	  </el-form-item>
	  <el-form-item label="Notes"  >
	     <el-input  type="textarea" :rows="2"  v-model="componentOtherSettings.notes" ></el-input>
	  </el-form-item>
	  <el-form-item label="Inbound Queue Capacity"  :required="true" >
	  <el-input-number  v-model="componentOtherSettings['inbound.queue.capacity']" ></el-input-number>
	   </el-form-item>
   </el-form>

</div>
</template>

<script>
    import {ConfigurationService} from '../apis/ConfigurationService.js';
	import Vue from 'vue';
	import 'element-ui/lib/theme-default/form.css';
	import 'element-ui/lib/theme-default/input.css';
	import 'element-ui/lib/theme-default/input-number.css';
	import 'element-ui/lib/theme-default/form-item.css';
	import 'element-ui/lib/theme-default/checkbox.css';
	import 'element-ui/lib/theme-default/option.css';
	import 'element-ui/lib/theme-default/select.css';
    import {Form,FormItem,Input,InputNumber,Checkbox,Select ,Option } from 'element-ui'
	Vue.component(Form.name, Form)
	Vue.component(FormItem.name, FormItem)
	Vue.component(Input.name, Input)
	Vue.component(InputNumber.name, InputNumber)
	Vue.component(Checkbox.name, Checkbox)
	Vue.component(Select.name, Select)
	Vue.component(Option.name, Option)
	
    export default {
		props:['componentId','projectVersionId'], //声明props
        data () {
            return {
				 component:{ComponentDefinition:{}},//控件信息
				 componentDefinition:[],//控件定义
				 componentSettings:[],//控件定义值
				 flows :[],//当前工程流程列表
				 //控件其他自带（没有xml定义）的属性值
				 componentOtherSettings:{
				     	enabled: true,
						logInput :false,
						logOutput :false,
						notes :"",
						"inbound.queue.capacity":100,
						inputModelId :null,
						outputModelId :null
						
				 },
				 dropDownModels:[]
            }
        },
		watch:{
			'componentId' (to, from) {
                //根据控件ID刷新界面
                this.refreshSheet() 
            }
		},
		components:{},
        mounted() {
			   //根据控件ID刷新界面
			   this.refreshSheet()
        }
		,methods:{
			//根据控件ID刷新界面
            refreshSheet(){
				var me=this;
				ConfigurationService.FindComponent(this.componentId ,true).then(
                         component =>{
							  me.componentDefinition =component.ComponentDefinition.settings.slice(1)
							  
							  var settingValues= {}
							  //已保存的设置值
							  component.ComponentSettings.forEach(cs=>{
								  settingValues[cs.Name] =cs.Value
							  });
							  //自带属性
							  if(settingValues["enabled"]){
								 me.componentOtherSettings.enabled = (settingValues["enabled"] =='true' )
							  }
							  if(settingValues["logOutput"]){
								 me.componentOtherSettings.logOutput = (settingValues["logOutput"] =='true' )
							  }
							  if(settingValues["logInput"]){
								 me.componentOtherSettings.logInput = (settingValues["logInput"] =='true' )
							  }
							  if(settingValues["notes"]){
								 me.componentOtherSettings.notes = settingValues["notes"]
							  }
							  if(settingValues["inbound.queue.capacity"]){
								 me.componentOtherSettings["inbound.queue.capacity"] = settingValues["inbound.queue.capacity"]
							  }
							  else{
								 me.componentOtherSettings["inbound.queue.capacity"]=100;
							  }
							 
							  if(component.InputModelId && component.InputModelId.Id ){
								 me.componentOtherSettings.inputModelId =component.InputModelId.Id
							  }
							  if(component.OutputModelId && component.OutputModelId.Id ){
								 me.componentOtherSettings.outputModelId =component.OutputModelId.Id
							  }
							
						   	
							  me.component =component;
							  me.flows =component.Flows;
							  me.dropDownModels =component.DropDownModels
							  me.refreshSettingValues(settingValues);
							  
                         }
                );
			},
			//展示已设置的值
			refreshSettingValues(settingValues){
				var me=this ;
				me.componentSettings=[]
				me.componentDefinition.forEach(s=>{
								  
					if(settingValues[s.id]){
						s.defaultValue =settingValues[s.id]
					}
										
					if(s.type!='boolean'){	
						if(!s.defaultValue){
							s.defaultValue="";
						}
					}
					else{
						if(s.defaultValue ==undefined){
							s.defaultValue =false;
						}
						if(s.defaultValue=='false'){
							s.defaultValue =false	
						}
						if(s.defaultValue=='true'){
							s.defaultValue =true	
						}
					}
					me.componentSettings.push(s.defaultValue)
								 
				});
			}
              

		}
    }
</script>

<style>


</style>